
<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="title">班级管理</text>
    </view>

    <!-- 主内容区 -->
    <view class="content">
      <!-- 分类标签和筛选 -->
      <view class="tab-filter">
        <view class="tabs">
          <view 
            class="tab-item" 
            :class="{'active': selectedTab === 'ongoing'}" 
            @tap="selectedTab = 'ongoing'"
          >
            <text>上课中 ({{ongoingCount}})</text>
          </view>
          <view 
            class="tab-item" 
            :class="{'active': selectedTab === 'finished'}" 
            @tap="selectedTab = 'finished'"
          >
            <text>已结班 ({{finishedCount}})</text>
          </view>
        </view>
        <view class="filter">
          <uni-popup ref="filterPopup" type="bottom">
            <view class="filter-content">
              <view class="filter-item">
                <text class="filter-label">校区选择</text>
                <uni-data-select
                  v-model="selectedCampus"
                  :localdata="campuses"
                  placeholder="选择校区"
                />
              </view>
              <view class="filter-item">
                <text class="filter-label">进度状态</text>
                <uni-data-select
                  v-model="selectedStatus"
                  :localdata="classStatus"
                  placeholder="选择状态"
                />
              </view>
              <view class="filter-item">
                <text class="filter-label">教练选择</text>
                <uni-data-select
                  v-model="selectedTeacher"
                  :localdata="teachers"
                  placeholder="选择教练"
                />
              </view>
              <view class="filter-item">
                <text class="filter-label">课程类型</text>
                <uni-data-select
                  v-model="selectedType"
                  :localdata="courseTypes"
                  placeholder="选择课程"
                />
              </view>
              <view class="filter-item">
                <text class="filter-label">视图类型</text>
                <view class="view-type">
                  <uni-button 
                    size="mini" 
                    :type="viewType === 'week' ? 'primary' : 'default'"
                    @click="viewType = 'week'"
                  >周</uni-button>
                  <uni-button 
                    size="mini" 
                    :type="viewType === 'month' ? 'primary' : 'default'"
                    @click="viewType = 'month'"
                  >月</uni-button>
                </view>
              </view>
            </view>
          </uni-popup>
          <uni-button size="mini" @click="openFilter">
            <uni-icons type="settings" size="16"></uni-icons>
            <text>筛选</text>
          </uni-button>
        </view>
      </view>

      <!-- 课程列表 -->
      <view class="course-list">
        <block v-if="filteredCourses.length">
          <view 
            v-for="(classroom, index) in filteredCourses" 
            :key="index"
            class="course-card"
            @tap="openClassDetail(classroom)"
          >
            <view class="card-header">
              <view class="class-info">
                <text class="class-name" :class="{'warning': classroom.uncomfirmedHours >= 1}">
                  {{classroom.name}}
                </text>
                <text class="class-id">ID: {{index + 1000}}</text>
                <text class="class-desc">智能分班系统自动编排</text>
              </view>
              <uni-tag :text="classroom.status" :type="getStatusType(classroom.status)" size="small" />
            </view>

            <view class="card-body">
              <view class="course-info">
                <text class="course-name">{{classroom.course}}</text>
                <text class="course-date" v-if="classroom.startDate && classroom.endDate">
                  {{classroom.startDate}} - {{classroom.endDate}}
                </text>
              </view>

              <view class="teacher-info">
                <view class="info-item">
                  <image class="teacher-avatar" :src="teacherAvatar" mode="aspectFill" />
                  <text>{{classroom.teacher}}</text>
                </view>
                <view class="info-item">
                  <uni-icons type="location" size="16"></uni-icons>
                  <text>{{classroom.campus}}</text>
                </view>
                <view class="info-item">
                  <uni-icons type="person" size="16"></uni-icons>
                  <text>{{classroom.enrolled}}/{{classroom.capacity}}人</text>
                </view>
              </view>

              <view class="hours-info">
                <view class="info-item">
                  <uni-icons type="calendar" size="16"></uni-icons>
                  <text>已排: {{classroom.scheduledHours || 0}}</text>
                </view>
                <view class="info-item">
                  <uni-icons type="calendar" size="16"></uni-icons>
                  <text>剩余: </text>
                  <text :class="{'warning': (classroom.scheduledHours || 0) - (classroom.completedHours || 0) <= 3}">
                    {{(classroom.scheduledHours || 0) - (classroom.completedHours || 0)}}
                  </text>
                </view>
                <view class="info-item">
                  <uni-icons type="calendar" size="16"></uni-icons>
                  <text>已签: {{classroom.completedHours || 0}}</text>
                </view>
                <view class="info-item">
                  <uni-icons type="calendar" size="16"></uni-icons>
                  <text :class="{'warning': classroom.uncomfirmedHours >= 1}">
                    未消: {{classroom.uncomfirmedHours || 0}}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </block>
        <view v-else class="empty-state">
          <image class="empty-image" src="https://ai-public.mastergo.com/ai/img_res/a3f6cb5d55793be75b9bb4d228ecc53f.jpg" mode="aspectFit" />
          <text class="empty-text">暂无课程安排</text>
          <uni-button type="primary" size="mini" class="empty-button">查看其他时间</uni-button>
        </view>
      </view>
    </view>

    <!-- 班级详情弹窗 -->
    <uni-popup ref="classDetailPopup" type="bottom">
      <view class="detail-content" v-if="selectedClass">
        <view class="detail-header">
          <text class="detail-title">{{selectedClass.name}}</text>
          <uni-icons type="close" size="24" @click="closeClassDetail"></uni-icons>
        </view>
        
        <view class="detail-tabs">
          <uni-segmented-control
            :current="currentTab"
            :values="['已排课时', '学员列表', '消课记录']"
            @clickItem="onTabChange"
          />
          
          <view class="tab-content">
            <!-- 已排课时 -->
            <view v-if="currentTab === 0">
              <view 
                v-for="(schedule, index) in schedules" 
                :key="index"
                class="schedule-item"
              >
                <view class="schedule-time">
                  <text class="date">{{schedule.date}}</text>
                  <text class="time">{{schedule.time}}</text>
                </view>
                <view class="schedule-status">
                  <uni-tag :text="schedule.signStatus" :type="schedule.signStatus === '已签' ? 'success' : 'warning'" size="small" />
                  <uni-tag :text="schedule.consumeStatus" :type="schedule.consumeStatus === '已消' ? 'success' : 'error'" size="small" />
                  <text class="attendees">{{schedule.attendees}}/{{selectedClass.capacity}}人</text>
                </view>
              </view>
            </view>

            <!-- 学员列表 -->
            <view v-if="currentTab === 1">
              <view 
                v-for="(student, index) in students" 
                :key="index"
                class="student-item"
              >
                <view class="student-info">
                  <image class="student-avatar" :src="studentAvatar" mode="aspectFill" />
                  <view class="student-detail">
                    <text class="student-name">{{student.name}}</text>
                    <text class="student-phone">{{student.phone}}</text>
                  </view>
                </view>
                <view class="student-hours">
                  <text>已上: {{student.attended}}课时</text>
                  <text>剩余: {{student.remaining}}课时</text>
                </view>
              </view>
            </view>

            <!-- 消课记录 -->
            <view v-if="currentTab === 2">
              <view 
                v-for="(record, index) in consumptionRecords" 
                :key="index"
                class="record-item"
              >
                <view class="record-info">
                  <image class="student-avatar" :src="studentAvatar" mode="aspectFill" />
                  <view class="record-detail">
                    <text class="student-name">{{record.studentName}}</text>
                    <text class="record-time">{{record.date}} {{record.time}}</text>
                  </view>
                </view>
                <view class="record-hours">
                  <text class="course-name">{{record.course}}</text>
                  <text class="hours">-{{record.hours}}课时</text>
                </view>
              </view>
              <view class="record-summary">
                <text>小计：{{totalHours}}课时</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const selectedTab = ref('ongoing');
const currentTab = ref(0);
const viewType = ref('week');
const filterPopupRef = ref();
const classDetailPopupRef = ref();

const selectedType = ref('');
const selectedCampus = ref('');
const selectedStatus = ref('');
const selectedTeacher = ref('');

const courseTypes = ref([
  { value: '力量训练', text: '力量训练' },
  { value: '瑜伽', text: '瑜伽' },
  { value: '游泳', text: '游泳' },
  { value: '搏击', text: '搏击' }
]);

const campuses = ref([
  { value: '东方广场店', text: '东方广场店' },
  { value: '西湖文化广场店', text: '西湖文化广场店' },
  { value: '钱江新城店', text: '钱江新城店' },
  { value: '滨江体育中心店', text: '滨江体育中心店' }
]);

const classStatus = ref([
  { value: '未开班', text: '未开班' },
  { value: '教学中', text: '教学中' },
  { value: '已结班', text: '已结班' }
]);

const teachers = ref([
  { value: '陈教练', text: '陈教练' },
  { value: '王教练', text: '王教练' },
  { value: '李教练', text: '李教练' }
]);

const courses = ref([
  {
    name: 'A01班',
    course: '健身基础训练',
    teacher: '陈教练',
    campus: '东方广场店',
    enrolled: 8,
    capacity: 12,
    status: '教学中',
    scheduledHours: 24,
    completedHours: 16,
    uncomfirmedHours: 4,
    startDate: '2024-01-01',
    endDate: '2024-03-31'
  },
  {
    name: 'A02班',
    course: '专业力量训练',
    teacher: '王教练',
    campus: '西湖文化广场店',
    enrolled: 12,
    capacity: 15,
    status: '未开班',
    scheduledHours: 36,
    completedHours: 0,
    uncomfirmedHours: 0,
    startDate: '2024-02-01',
    endDate: '2024-04-30'
  }
]);

const students = ref([
  { name: '张雨晨', phone: '138****1234', attended: 12, remaining: 24 },
  { name: '李明浩', phone: '139****5678', attended: 8, remaining: 28 }
]);

const schedules = ref([
  { date: '2024-01-15', time: '09:00-10:30', signStatus: '已签', consumeStatus: '已消', attendees: 8 },
  { date: '2024-01-17', time: '09:00-10:30', signStatus: '已签', consumeStatus: '已消', attendees: 7 }
]);

const consumptionRecords = ref([
  { studentName: '张雨晨', date: '2024-01-15', time: '09:00-10:30', course: '健身基础训练', hours: 1 },
  { studentName: '李明浩', date: '2024-01-15', time: '09:00-10:30', course: '健身基础训练', hours: 1 }
]);

const selectedClass = ref(null);
const teacherAvatar = 'https://mastergo.com/ai/api/search-image?query=3D professional portrait photo of a smiling fitness trainer, athletic build, wearing sports attire, natural lighting, studio photography, isolated on light gray background&width=100&height=100&orientation=squarish';
const studentAvatar = 'https://mastergo.com/ai/api/search-image?query=3D portrait photo realistic avatar of person doing exercise in gym, professional studio lighting, high quality, photo realistic, isolated on light gray background&width=80&height=80&orientation=squarish';

const ongoingCount = computed(() => 
  courses.value.filter(course => course.status === '未开班' || course.status === '教学中').length
);

const finishedCount = computed(() => 
  courses.value.filter(course => course.status === '已结班').length
);

const filteredCourses = computed(() => {
  if (selectedTab.value === 'ongoing') {
    return courses.value.filter(course => course.status === '未开班' || course.status === '教学中');
  } else {
    return courses.value.filter(course => course.status === '已结班');
  }
});

const totalHours = computed(() => {
  return consumptionRecords.value.reduce((sum, record) => sum + record.hours, 0);
});

const getStatusType = (status: string) => {
  switch (status) {
    case '教学中':
      return 'success';
    case '未开班':
      return 'warning';
    default:
      return 'default';
  }
};

const openFilter = () => {
  filterPopupRef.value?.open();
};

const openClassDetail = (classroom: any) => {
  selectedClass.value = classroom;
  classDetailPopupRef.value?.open();
};

const closeClassDetail = () => {
  classDetailPopupRef.value?.close();
};

const onTabChange = (e: any) => {
  currentTab.value = e.currentIndex;
};
</script>

<style>
page {
  height: 100%;
}

.page {
  background-color: #f5f5f5;
  height: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.content {
  padding-top: 88rpx;
  padding-bottom: 32rpx;
}

.tab-filter {
  background-color: #ffffff;
  padding: 20rpx 32rpx;
  margin-top: 16rpx;
}

.tabs {
  display: flex;
  border-bottom: 2rpx solid #f0f0f0;
}

.tab-item {
  padding: 16rpx 32rpx;
  margin-right: 32rpx;
  position: relative;
}

.tab-item.active {
  color: #2979ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 0;
  right: 0;
  height: 4rpx;
  background-color: #2979ff;
}

.filter {
  display: flex;
  justify-content: flex-end;
  margin-top: 16rpx;
}

.course-list {
  padding: 32rpx;
}

.course-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.class-name {
  font-size: 32rpx;
  font-weight: 500;
}

.class-name.warning {
  color: #ff4d4f;
}

.class-id {
  font-size: 24rpx;
  color: #999999;
  margin-left: 16rpx;
  background-color: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.class-desc {
  font-size: 24rpx;
  color: #999999;
  margin-top: 8rpx;
  display: block;
}

.card-body {
  margin-top: 24rpx;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.course-name {
  font-size: 28rpx;
  color: #666666;
}

.course-date {
  font-size: 24rpx;
  color: #999999;
}

.teacher-info,
.hours-info {
  display: flex;
  gap: 32rpx;
  margin-top: 16rpx;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666666;
}

.teacher-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  margin-right: 8rpx;
}

.warning {
  color: #ff4d4f;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64rpx 32rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.empty-image {
  width: 240rpx;
  height: 240rpx;
}

.empty-text {
  color: #999999;
  font-size: 28rpx;
  margin: 32rpx 0;
}

.filter-content {
  background-color: #ffffff;
  padding: 32rpx;
  border-radius: 32rpx 32rpx 0 0;
}

.filter-item {
  margin-bottom: 24rpx;
}

.filter-label {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
  display: block;
}

.view-type {
  display: flex;
  gap: 16rpx;
}

.detail-content {
  background-color: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx;
  max-height: 80vh;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.detail-title {
  font-size: 32rpx;
  font-weight: 500;
}

.tab-content {
  margin-top: 32rpx;
}

.schedule-item,
.student-item,
.record-item {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
}

.schedule-time,
.student-info,
.record-info {
  display: flex;
  flex-direction: column;
}

.date {
  font-size: 28rpx;
}

.time {
  font-size: 24rpx;
  color: #999999;
  margin-top: 8rpx;
}

.schedule-status {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.attendees {
  font-size: 24rpx;
  color: #999999;
}

.student-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.student-detail,
.record-detail {
  margin-left: 16rpx;
}

.student-name {
  font-size: 28rpx;
  font-weight: 500;
}

.student-phone,
.record-time {
  font-size: 24rpx;
  color: #999999;
  margin-top: 8rpx;
}

.student-hours {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 24rpx;
  color: #666666;
  gap: 8rpx;
}

.record-hours {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.record-hours .course-name {
  font-size: 28rpx;
  font-weight: 500;
}

.record-hours .hours {
  font-size: 24rpx;
  color: #2979ff;
  margin-top: 8rpx;
}

.record-summary {
  text-align: right;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666666;
}
</style>

